<template>
<el-card>
    <el-button
      @click="$router.push('/specs/add')"
      type="primary"
      icon="el-icon-circle-plus-outline"
    >新增</el-button>
    <el-divider />
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="日期" min-width="80"></el-table-column>
      <el-table-column prop="specsname" label="规格名称" min-width="180"></el-table-column>
      <el-table-column prop="attrs" label="规格可选值" min-width="180">
        <template v-slot="$props">
          <el-tag type="success" v-for="(item,index) in $props.row.attrs" :key="index">{{item}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="180">
        <template v-slot="$props">
          <el-tag type="success" v-if="$props.row.status===1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template v-slot="$props">
          <el-button
            @click="$router.push(`/specs/${$props.row.id}`)"
            type="success"
            circle
            icon="el-icon-edit"
            size="mini"
          ></el-button>
          <el-button
            @click="del($props.row.id)"
            type="danger"
            circle
            icon="el-icon-delete"
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="pageChange"
      :page-size="size"
      background
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </el-card>
  
</template>

<script>
import {getSpecsList,getSpecsCount} from '../../request/specs'
export default {
    data(){
        return{
            list:[],
            page:1,
            size:1,
            total:0
        }
    },
    methods:{
        del(id){
            this.$confirm(async ()=>{
                const res=await this.$http.post('/api/specsdelete',{id})
                if(res.code==200){
                    const index=this.list.findIndex(item=>item.id==id)
                    this.list.splice(index,1)
                    return this.$success(res.msg)
                }
                this.$error(res.msg)
            })
        },
        pageChange(page){
            this.page=page
            getSpecsList(this.page,this.size).then(list=>{
                if(list){
                    this.list=list
                }
            })

        },
        async dataInit(){
            const [list,total]=await this.$http.all([
                getSpecsList(this.page,this.size),
                getSpecsCount()

            ])
            this.list=list
            this.total=total
        }
    },
    created(){
        this.dataInit()
    }

}
</script>

<style scoped lang='less'>
.el-tag{
    margin: 2px 5px;
}

</style>